<template>
  <div>
    <div class="video" v-show="mAll">
      <div class="title">视频专区</div>

      <van-tabs v-model="active">
        <van-tab title="全部">
          <div class="mvAll">
            <ul>
              <router-link
                v-for="item in mAll"
                :key="item.id"
                tag="li"
                :to="'/mvplay/mvplay?id=' + item.id"
              >
                <div class="img">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="mes">
                  <p>{{ item.artistName }} - {{ item.name }}</p>
                </div>
              </router-link>
            </ul>
          </div>
        </van-tab>

        <van-tab title="推荐">
          <div class="mvCom">
            <ul>
              <router-link
                v-for="item in mCom"
                :key="item.id"
                tag="li"
                :to="'/mvplay/mvplay?id=' + item.id"
              >
                <div class="img">
                  <img :src="item.picUrl" alt="" />
                </div>
                <div class="mes">
                  <p>{{ item.artistName }} - {{ item.name }}</p>
                </div>
              </router-link>
            </ul>
          </div>
        </van-tab>

        <van-tab title="最新">
          <div class="mvNew">
            <ul>
              <router-link
                v-for="item in mNew"
                :key="item.id"
                tag="li"
                :to="'/mvplay/mvplay?id=' + item.id"
              >
                <div class="img">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="mes">
                  <p>{{ item.artistName }} - {{ item.name }}</p>
                </div>
              </router-link>
            </ul>
          </div>
        </van-tab>

        <van-tab title="排行">
          <div class="mvNum">
            <ul>
              <router-link
                v-for="item in mNum"
                :key="item.id"
                tag="li"
                :to="'/mvplay/mvplay?id=' + item.id"
              >
                <div class="img">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="mes">
                  <p>{{ item.artistName }} - {{ item.name }}</p>
                </div>
              </router-link>
            </ul>
          </div>
        </van-tab>

        <van-tab title="独家">
          <div class="mvSelf">
            <ul>
              <router-link
                v-for="item in mSelf"
                :key="item.id"
                tag="li"
                :to="'/mvplay/mvplay?id=' + item.id"
              >
                <div class="img">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="mes">
                  <p>{{ item.artistName }} - {{ item.name }}</p>
                </div>
              </router-link>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {
  getMvAll,
  getMVCommend,
  getMVFirst,
  getMVTop,
  getMVExclusive,
} from "../api/video";
export default {
  data() {
    return {
      active: 0,
      mAll: null,
      mCom: null,
      mNew: null,
      mNum: null,
      mSelf: null,
    };
  },
  methods: {
    async getMvAllFun() {
      await getMvAll().then((data) => {
        // console.log(data);
        this.mAll = data.data;
      });
    },
    async getMVCommendFun() {
      await getMVCommend().then((data) => {
        // console.log(data);
        this.mCom = data.result;
      });
    },
    async getMVFirstFun() {
      await getMVFirst().then((data) => {
        //  console.log(data);
        this.mNew = data.data;
      });
    },
    async getMVTopFun() {
      await getMVTop().then((data) => {
        //  console.log(data);
        this.mNum = data.data;
      });
    },
    async getMVExclusiveFun() {
      await getMVExclusive().then((data) => {
        //  console.log(data);
        this.mSelf = data.data;
      });
    },
  },
  created() {
    this.getMvAllFun();
    this.getMVCommendFun();
    this.getMVFirstFun();
    this.getMVTopFun();
    this.getMVExclusiveFun();

    this.$emit("getnavs-btn", true);
  },
};
</script>

<style lang="less">
.video {
  padding-bottom: 50px;
  .title {
    width: 100%;
    min-height: 30px;
    line-height: 30px;
    font-size: 20px;
    background-color: #d44439;
    color: #fff;
    text-align: center;
    padding: 8px 0;
  }
  .mvAll,
  .mvCom,
  .mvNew,
  .mvNum,
  .mvSelf {
    margin-top: 8px;
    ul {
      li {
        padding: 0 8px;
        margin-bottom: 10px;
        .img {
          width: 100%;
          height: auto;
          img {
            width: 100%;
            height: auto;
          }
        }
        .mes {
          padding: 4px 8px;
          p {
            font-size: 16px;
            // 2、让文本不会自动换行 ：
            white-space: nowrap;
            // 3、让文本溢出隐藏：
            overflow: hidden;
            // 4、文本溢出时显示省略号：
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
